<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
  个人中心
  User: fzh
  Date: 2017/9/13
  Time: 14:44
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!doctype html>
<html>
<head>
    <title>个人中心</title>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <link rel="stylesheet" href="<c:url value="/assets/css/default.css"/>">
    <script type="text/javascript" src="<c:url value="/assets/js/jquery-3.2.1.min.js"/>"></script>
    <link rel="stylesheet" href="<c:url value="/assets/css/form.css"/>">
    <style type="text/css">
        .container {
            display: flex;
            justify-content: space-between;
            box-sizing: border-box;
            width: 100%;
            min-height: calc(100% - 212px);
        }

        .menu-container {
            display: flex;
            width: 10%;
        }

        .content {
            display: flex;
            width: 80%;
            box-sizing: border-box;
            padding: 10px 20px;
        }

        .form {
            width: 50%;
        }
    </style>
</head>
<body>
<jsp:include page="../../components/pageHeader.jsp"/>
<div class="container">
    <div class="menu-container">
        <jsp:include page="../../components/person_menu.jsp"/>
    </div>
    <div class="content">
        <form name="personInfo" action="<c:url value="/user/update"/>" method="post" class="form">
            <input hidden name="userId" value="${sessionScope.user.userId}" title="...">
            <input hidden name="username" value="${sessionScope.user.username}" title="...">
            <div class="row">
                <div class="col">
                    <div class="col-label">身份证号</div>
                    <div class="col-content">
                        <input id="idNum" title="身份证号" name="idNum" value="${sessionScope.user.idNum}">
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col">
                    <div class="col-label">姓名</div>
                    <div class="col-content">
                        <input title="姓名" name="name" value="${sessionScope.user.name}">
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col">
                    <div class="col-label">手机号</div>
                    <div class="col-content">
                        <input title="手机号" name="phone" value="${sessionScope.user.phone}">
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col">
                    <div class="col-label">电子邮箱</div>
                    <div class="col-content">
                        <input title="电子邮箱" name="email" type="email" value="${sessionScope.user.email}">
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col">
                    <div class="col-label">籍贯</div>
                    <div class="col-content">
                        <div class="no-border flex vertical-center">
                            <label>
                                <select class="no-outline" id="provinces" style="width: 120px" name="province"
                                        onChange="initCities()"></select>&nbsp;省
                            </label>&nbsp;&nbsp;
                            <label>
                                <select class="no-outline" id="cities" style="width: 120px" name="city"></select>&nbsp;市
                            </label>
                        </div>
                    </div>
                </div>
            </div>
            <input hidden value="${sessionScope.user.birthplace}" id="birthplace" name="birthplace" title="...">
            <div class="row">
                <div class="col">
                    <div class="col-label">性别</div>
                    <div class="col-content">
                        <div class="no-border no-flex">
                            <label>
                                <input type="radio" ${sessionScope.user.gender == 1? "checked" : ""} name="gender"
                                       value="1">
                                男
                            </label>
                            <label>
                                <input type="radio" ${sessionScope.user.gender == 0? "checked" : ""} name="gender"
                                       value="0">
                                女
                            </label>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col">
                    <div class="col-label">民族</div>
                    <div class="col-content">
                        <div class="flex vertical-center no-border">
                            <select style="width: 120px; outline: none" name="nation" title="民族" id="nation">
                            </select>
                        </div>
                    </div>
                </div>
            </div>
            <input hidden value="${sessionScope.user.nation}" id="real_nation" title="...">
            <div class="row">
                <div class="col">
                    <div class="col-label">家庭住址</div>
                    <div class="col-content">
                        <input title="家庭住址" name="homeaddress" value="${sessionScope.user.homeaddress}">
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col">
                    <div class="col-label">教育经历</div>
                    <div class="col-content">
                        <div class="flex vertical-center no-border">
                            <select style="width: 120px; outline: none" name="education" title="教育经历" id="education">
                                <option value="小学">小学</option>
                                <option value="初中">初中</option>
                                <option value="高中">高中</option>
                                <option value="大学">大学</option>
                                <option value="硕士">硕士</option>
                                <option value="博士">博士</option>
                            </select>
                        </div>
                    </div>
                </div>
            </div>
            <input hidden value="${sessionScope.user.education}" id="real_education" title="...">
            <div class="row">
                <div class="col">
                    <div class="col-label">政治面貌</div>
                    <div class="col-content">
                        <div class="flex vertical-center no-border">
                            <select style="width: 120px; outline: none" name="politicalstatus" title="政治面貌"
                                    id="politicalstatus">
                                <option value="群众">群众</option>
                                <option value="团员">团员</option>
                                <option value="预备党员">预备党员</option>
                                <option value="党员">党员</option>
                                <option value="其他党派">其他党派</option>
                            </select>
                        </div>
                    </div>
                </div>
            </div>
            <input hidden value="${sessionScope.user.politicalstatus}" id="real_politicalstatus" title="...">
            <div class="row">
                <div class="col">
                    <div class="col-label">邮编</div>
                    <div class="col-content">
                        <input title="邮编" name="postcode" value="${sessionScope.user.postcode}">
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col">
                    <div class="col-label"></div>
                    <div class="col-content">
                        <button class="btn btn-success" title="点击提交修改" onclick="preSubmit(event)">提交修改</button>
                    </div>
                </div>
                <div class="col"></div>
            </div>
        </form>
    </div>
</div>
<jsp:include page="../../components/pageFooter.jsp"/>
<script type="text/javascript" src="<c:url value="/assets/js/util.js"/>"></script>
<script type="text/javascript" defer>

    function preSubmit(event) {
        if (!idNumCheck()) event.preventDefault();
        $("#birthplace").val($("#provinces").val() + "省" + $("#cities").val() + "市");
    }

    (function () {
        let nation = document.getElementById("nation");
        for (let n of nations) {
            let op = document.createElement("option");
            op.value = n;
            op.innerText = n;
            nation.appendChild(op);
        }
    }());

    function init() {
        let nv = $("#real_nation").val();
        if (nv !== '') {
            $("#nation").val(nv);
        }
        let ev = $("#real_education").val();
        if (ev !== '') {
            $("#education").val(ev);
        }
        let pv = $("#real_politicalstatus").val();
        if (pv !== '') {
            $("#politicalstatus").val(pv);
        }

        // 没有填写籍贯时初始化
        let provinces = document.getElementById("provinces");
        for (let o of birthplace) {
            let op = document.createElement("option");
            op.value = o.province;
            op.innerText = o.province;
            provinces.appendChild(op);
        }
        let bp = $("#birthplace").val();
        let pos = bp.indexOf("省");
        if (pos > -1) {
            provinces.value = bp.substring(0, pos);
        }
        initCities();
        let cpos = bp.indexOf("市");
        if (cpos > -1) {
            document.getElementById("cities").value = bp.substring(pos + 1, cpos);
        }
    }

    function initCities() {
        let provinces = document.getElementById("provinces");
        let cities = document.getElementById("cities");
        while (cities.hasChildNodes()) {
            cities.removeChild(cities.firstChild);
        }
        let x;
        for (let o of birthplace) {
            if (o.province === provinces.value) {
                x = o;
                break;
            }
        }
        for (let o of x.cities) {
            let op = document.createElement("option");
            op.value = o;
            op.innerText = o;
            cities.appendChild(op);
        }
    }

    function idNumCheck() {
        let e = $("#idNum");
        let ev = e.val();
        // 长度校验
        if (ev.length !== 18) {
            alert("请检查身份证号长度");
            e.focus();
            return false;
        }
        let reg = new RegExp("^\\d{17}(\\d|X)$");

        // 是否为数字（包括尾数为X）
        if (!reg.test(ev)) {
            alert("请检查身份证号码格式");
            return false;
        }
        // 检查行政区划代码
        let targetObj = nameAndCode;
        let crc;
        let iterator;
        for (let i = 0; i < 3; i++) {
            crc = ev.substr(i * 2, 2);
            iterator = targetObj[Symbol.iterator]();
            targetObj = validate(iterator, (x) => {
                return x.code.substr(i * 2, 2) === crc;

            });
            if (targetObj === null) {
                alert("请检查身份证号码格式");
                return false;
            }
        }
        // 生日校验
        let year = Number.parseInt(ev.substr(6, 4));
        let month = Number.parseInt(ev.substr(10, 2));
        let day = Number.parseInt(ev.substr(12, 2));
        if (!validateDate(year, month, day)) {
            alert("身份证号不合法");
            return false;
        }
        return true;
    }

    function validateDate(year, month, day) {
        let now = new Date();
        if (year > now.getFullYear()) return false;
        if (month > 12) return false;
        if (day > 31) return false;
        let _31 = [1, 3, 5, 7, 8, 10, 12];
        let rm = false;
        if ((year % 4 === 0 && year % 100 !== 0) || (year % 400 === 0)) rm = true;
        if (month === 2) return day <= (28 + (rm ? 1 : 0));
        let _31m = _31.indexOf(month) > -1;
        return day <= (30 + (_31m ? 1 : 0));

    }

    function validate(iter, test) {
        let o;
        while (true) {
            o = iter.next();
            if (o.done === true) {
                return null;
            }
            if (test(o.value)) {
                return o.value.children;
            }
        }
    }

    window.onload = init();
</script>
</body>
</html>
